<script setup>
import {BaseImgUrl} from "../utils/lshttp";
import {bindBoxPosterHook} from "./blind_box_hook";
const {
  scrollTop,
  onScroll,
  html,
  html1,
  isfShowZL,
  isfShowZLSuc,
  isfShowGif,
  listImageC,
  isShowBackHome,
  successList,
  mhCount,
  mhcj,
  goBack,
  toRedBag,
  toBlindBoxHelpList,
  toBlindBoxPoster,
  zhuLi
} = bindBoxPosterHook()
</script>

<template>
  <view class="navbar" :style="{background: `rgba(250, 63, 66, ${scrollTop/88 > 0.92 ? 0.92 : scrollTop/88})`}">
    <up-status-bar></up-status-bar>
    <view class="back_content">
      <view style="padding-left: 10rpx;"></view>
      <view style="padding: 20rpx;z-index: 100">
        <up-icon
            v-if="!isShowBackHome"
            name="arrow-left"
            size="19"
            color="#FFFFFF"
            @click="goBack"
        ></up-icon>
        <view class="u-nav-slot" v-else @click="goBack">
          <up-icon
              name="arrow-left"
              size="19"
              color="#FFFFFF"
          ></up-icon>
          <up-line
              direction="column"
              :hairline="false"
              length="16"
              color="#FFFFFF"
              margin="auto 8px"
          ></up-line>
          <up-icon
              name="home"
              size="20"
              color="#FFFFFF"
          ></up-icon>
        </view>
      </view>
      <text
          style="font-weight: 400;font-size: 32rpx;line-height: 44px;height:44px;position: absolute;width: 100%;text-align: center;color: #ffffff">
        助力开盲盒
      </text>
    </view>
  </view>
  <scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll" style="width: 100%;">
    <view style="background: linear-gradient( 178deg, #FD333C 0%, #FF492E 100%);width: 750rpx;">
      <image :src="BaseImgUrl +'/mh/mh11.png'"
             style="width: 750rpx;height: 1256rpx;position: absolute;z-index: 0"></image>
      <up-status-bar></up-status-bar>
      <view style="height: 86px"></view>
      <!--    <view class="title1">开盲盒薅羊毛</view>-->
      <!--    <view class="title2">薅几次您说了算</view>-->
      <view style="position: relative;padding-top: 20rpx">
        <image :src="BaseImgUrl +'/mh/mh10.png'" style="width: 660rpx;height: 152rpx;margin-left: 45rpx"></image>
        <view style="position: relative;margin-top: 28rpx">

          <image :src="BaseImgUrl +'/mh/mh12.png'" style="width: 750rpx;height: 1526rpx;position: absolute;"></image>
          <view class="notice" style="padding-top: 6rpx;display: flex">
            <view style="width: 26rpx"></view>
            <up-icon name="volume" size="17" color="#EB111A"></up-icon>
            <view style="margin-left: -16rpx;position: relative;flex: 1" >
              <up-notice-bar icon="" bgColor="#fdd69e00" direction="column" duration="3000"
                             :disableTouch="true"
                             color="#EB111A" fontSize="24rpx" :text="successList"></up-notice-bar>
            </view>
          </view>

          <view style="margin: 69rpx 106rpx 0">
            <up-grid :border="false" gap="10" align="center">
              <up-grid-item
                  v-for="(image,index) in listImageC"
                  :key="index">
                <view style="margin-top: 10rpx"></view>
                <view :class="image.img === 'https://lsz.lszbg.com/imgs/raffle/gif_tow.png'?'szbg1':'szbg2'"
                      style="display: flex;align-items: center;justify-content: center"
                      :style="{scale: image.img === 'https://lsz.lszbg.com/imgs/raffle/gif_tow.png' ? 1:0.99}">
                  <image src="https://lsz.lszbg.com/imgs/mh/mh2.png" style="transition: 0.088s ease-in-out;width: 100rpx;height: 100rpx"></image>
                </view>
              </up-grid-item>
            </up-grid>
          </view>
        </view>
        <view style="margin-top: 60rpx;position: relative;height: 152rpx;" @click="mhcj">
          <image :src="BaseImgUrl +'/mh/mh9.png'"
                 style="width: 482rpx;height: 152rpx;margin-left: 130rpx;position: absolute"></image>
          <image :src="BaseImgUrl +'/mh/mh8.png'" class="hands"
                 style="width: 100rpx;height: 90rpx;right: 128rpx;top:18rpx;position: absolute"></image>
          <view
              style="background-color: #FFFFFF00;position: absolute;bottom: 36rpx;right: 0;left: 0;text-align: center;color: #e22033;font-size: 24rpx;font-weight: bold">
            您剩余开盲盒次数：{{mhCount}}次
          </view>
        </view>
        <view class="title3" style="position: relative">您百分百能开出以下宠粉奖品哦</view>
        <view style="position: relative;width: 700rpx;height: 256rpx;margin-left: 25rpx;">
          <image :src="BaseImgUrl +'/mh/mh7.png'" style="width: 700rpx;height: 256rpx;position: absolute"></image>
          <view style="display: flex;padding-top: 3rpx;padding-left: 6rpx">
            <view v-for="(item,index) in 22" :key="index"
                  style="position: relative;height: 16rpx;display: flex;width: 100%;align-items: center;justify-content: space-between">
              <image :src="BaseImgUrl +'/mh/mh6.png'" style="width: 16rpx;height: 16rpx;z-index: 2"></image>
            </view>
          </view>
          <view style="display: flex;padding-top: 3rpx;padding-left: 6rpx;position: absolute;bottom: 16rpx;right: 2rpx">
            <view v-for="(item,index) in 22" :key="index" style="position: relative;height: 16rpx;margin-right: 14rpx">
              <image :src="BaseImgUrl +'/mh/mh6.png'" style="width: 16rpx;height: 16rpx;z-index: 2"></image>
            </view>
          </view>
          <view style="padding-top: 3rpx;padding-left: 3rpx;height: 256rpx">
            <view v-for="(item,index) in 6" :key="index" style="position: relative;">
              <image :src="BaseImgUrl +'/mh/mh6.png'" style="width: 16rpx;height: 16rpx;z-index: 2"></image>
            </view>
          </view>
          <view style="padding-top: 3rpx;padding-left: 3rpx;height: 256rpx;position: absolute;right: 6rpx;top: 15rpx">
            <view v-for="(item,index) in 6" :key="index" style="position: relative;">
              <image :src="BaseImgUrl +'/mh/mh6.png'" style="width: 16rpx;height: 16rpx;z-index: 2"></image>
            </view>
          </view>
          <view
              style="display: flex;align-items: center;padding: 50rpx 30rpx;justify-content: space-between;position: absolute;left: 0;right: 0;top: 0">
            <view v-for="(item,index) in 4" :key="index" style="position: relative">
              <image :src="BaseImgUrl +'/mh/mh4.png'" style="width: 156rpx;height: 156rpx;position: absolute"></image>
              <view class="element-to-animate"
                    style="position: relative;display: flex;flex-direction: column;;align-items: center;margin-top: 50rpx;width: 156rpx">
                <view style="color: #E13218;font-size: 28rpx;font-weight: bold">
                  6元
                </view>
                <view style="color: #E13218;font-size: 20rpx;font-weight: bold;margin-top: 1rpx">
                  现金抵用券
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="position: relative;z-index: 1">
          <up-sticky offset-top="200">
            <image :src="BaseImgUrl +'/mh/myzl.png'" @click="toBlindBoxHelpList"
                   style="width: 120rpx;height: 120rpx;position: absolute;right: 10rpx;top: -20rpx"></image>
          </up-sticky>
        </view>
        <view style="position: relative;width: 700rpx;height: 586rpx;margin-left: 25rpx;margin-top: 30rpx">
          <image :src="BaseImgUrl +'/mh/mh3.png'" style="width: 700rpx;height: 586rpx;position: absolute"></image>
          <view style="width: 604rpx;height: 272rpx;background: #FFCC9C;border-radius: 16rpx 16rpx 16rpx 16rpx;position: absolute;top: 150rpx;left: 48rpx;
display: flex;flex-direction: column;align-items: center">
            <view style="height: 28rpx"></view>
            <view style="font-weight: bold;font-size: 26rpx;color: #CE5600;">每成功邀请3人助力，获得1次开启盲盒的机会
            </view>
            <view style="display: flex;align-items: center;margin-top: 20rpx;">
              <view class="" style="width: 466rpx;margin-left: 10rpx">
                <progress :percent="(3/10*100)"
                          border-radius="100"
                          duration="16"
                          stroke-width="16"
                          activeColor="#fd443c"
                          backgroundColor="#FFDECE"
                          active="true"/>
              </view>
              <image :src="BaseImgUrl +'/mh/mh1.png'" style="width: 88rpx;height: 100rpx;margin-left: -20rpx"></image>
            </view>
            <view style="height: 23rpx"></view>
            <view style="font-weight: 400;font-size: 24rpx;color: #CE5600;">已有1为好友助力，还差2名好友即可开启盲盒</view>

          </view>
          <view @click="toBlindBoxPoster" style="width: 400rpx;height: 80rpx; border-radius: 60rpx;text-align: center;line-height: 80rpx;font-size: 36rpx;
        color: #E42033;position: absolute;bottom: 60rpx;right: 150rpx;background: linear-gradient( 180deg, #FFD831 0%, #FFB11E 100%);">
            邀请好友助力
          </view>
        </view>
        <view style="position: relative;width: 700rpx;margin-left: 25rpx;margin-top: 30rpx;">
          <image :src="BaseImgUrl +'/mh/mh51.png'" style="width: 700rpx;height: 147rpx;"></image>
          <view style="position: relative;width: 700rpx">
            <image :src="BaseImgUrl +'/mh/mh52.png'" style="width: 700rpx;height: 100%;position: absolute"></image>
            <view v-for="(item,index) in 4" :key="index"
                  style="position: relative;width: 700rpx;display: flex;padding-top: 20rpx;margin-left: 38rpx">
              <image :src="BaseImgUrl +'/mh/mh13.png'" style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"></image>
              <view
                  style="color: white;width: 588rpx;word-break:break-all;line-height: 38rpx;letter-spacing: 2rpx;font-size: 26rpx;margin-top: -3rpx">
                每3位朋友通过您分享的海报为您助力，您可获得一次开启盲盒的机会。
              </view>
            </view>
          </view>
          <image :src="BaseImgUrl +'/mh/mh53.png'" style="width: 700rpx;height: 48rpx;margin-top: -3rpx"></image>
        </view>
        <view style="height: 128rpx"></view>
      </view>
    </view>
  </scroll-view>

  <up-popup :show="isfShowGif" mode="center" bg-color="#00000000">
    <view style="display: flex;flex-direction: column;align-items: center">
      <view style="font-weight: 400;font-size: 80rpx;color: #FFF8BE;line-height: 80rpx;">恭喜您获得</view>
      <view style="height: 38rpx"></view>
      <view
          style="width: 630rpx;height: 724rpx;position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center">
        <image :src="BaseImgUrl +'/mh/mhtk1.png'" style="width: 630rpx;height: 724rpx;position: absolute"></image>
        <view style="height: 58rpx"></view>
        <view
            style="width: 356rpx;height: 356rpx;position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center">
          <image :src="BaseImgUrl +'/mh/mh4.png'" style="width: 356rpx;height: 356rpx;position: absolute"></image>
          <view
              style="position: relative;display: flex;flex-direction: column;align-items: center;color: #E13218;font-size: 36rpx;font-weight: bold">
            <view style="line-height: 64rpx;display: flex">
              <view style="font-size: 64rpx;">0</view>
              <view style="font-size: 38rpx;padding-top: 6rpx;margin-left: 3rpx">元</view>
            </view>
            <view style="letter-spacing: 6rpx">下午茶</view>
          </view>
        </view>
        <view @click="toRedBag" style="width: 400rpx;height: 80rpx;background: linear-gradient( 360deg, #FC754A 0%, #FEC135 100%);margin-top: 38rpx;
            border-radius: 60rpx;font-size: 32rpx;color: white;font-weight: bold;position: relative;display: flex;align-items: center;justify-content: center">
          立即查看
        </view>
      </view>
      <image :src="BaseImgUrl +'/mh/close.png'" style="width: 66rpx;height: 66rpx;;z-index: 200"
             @click="isfShowGif=false"></image>
    </view>
  </up-popup>
  <up-popup :show="isfShowZLSuc" mode="center" bg-color="#00000000">
    <view style="display: flex;flex-direction: column;align-items: center">
      <view style="font-weight: 400;font-size: 72rpx;color: #FFF8BE;line-height: 80rpx;">恭喜您助力成功</view>
      <view style="height: 18rpx"></view>
      <view
          style="width: 632rpx;height: 920rpx;position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center">
        <image :src="BaseImgUrl +'/mh/mhtk2.png'" style="width: 632rpx;height: 920rpx;position: absolute"></image>
        <view style="height: 198rpx"></view>
        <view
            style="width: 425rpx;margin-left: 20rpx;height: 258rpx;position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center;">
          <scroll-view scroll-y="true" show-scrollbar="true" class="sc" style="">
            <up-parse :content="html"></up-parse>
          </scroll-view>
        </view>
        <view style="flex: 1"></view>
        <image :src="BaseImgUrl +'/mh/test.png'" style="width: 312rpx;height: 312rpx;box-shadow: 0 0 20rpx 3rpx rgba(254,53,61,0.2);
        border-radius: 12rpx 12rpx 12rpx 12rpx;position: relative" show-menu-by-longpress></image>
        <view style="height: 128rpx"></view>
      </view>
      <image :src="BaseImgUrl +'/mh/close.png'" style="width: 66rpx;height: 66rpx;margin-top: -50rpx;z-index: 200"
             @click="isfShowZLSuc=false"></image>
    </view>
  </up-popup>
  <up-popup :show="isfShowZL" mode="center" bg-color="#00000000">
    <view style="display: flex;flex-direction: column;align-items: center">
      <view style="font-weight: 400;font-size: 66rpx;color: #FFF8BE;line-height: 80rpx;">领食请你0元吃外卖</view>
      <view style="height: 18rpx"></view>
      <view
          style="width: 632rpx;height: 920rpx;position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center">
        <image :src="BaseImgUrl +'/mh/mhtk2.png'"
               style="width: 632rpx;height: 920rpx;position: absolute;top: 0;right: 0;left: 0"></image>
        <view style="height: 198rpx;"></view>
        <view
            style="width: 425rpx;margin-left: 20rpx;flex: 1;position: relative;display: flex;align-items: center;flex-direction: column;justify-content: center;">
          <scroll-view scroll-y="true" show-scrollbar="true">
            <up-parse :content="html1"></up-parse>
          </scroll-view>
        </view>
        <view @click="zhuLi"
              style="width: 382rpx;height: 64rpx;line-height: 64rpx;text-align: center;background: linear-gradient( 90deg, #FD3C40 0%, #FF5F3D 50%, #FD3C40 100%);;font-size: 32rpx;font-weight: bold;color: white;position: relative;border-radius: 60rpx">
          立即为Ta助力
        </view>
        <view style="height: 128rpx"></view>
      </view>
      <image :src="BaseImgUrl +'/mh/close.png'" style="width: 66rpx;height: 66rpx;margin-top: -50rpx;z-index: 200"
             @click="isfShowZL=false"></image>
    </view>
  </up-popup>
</template>
<style>
page {
  height: 100%;
  width: 100%;
}

</style>
<style scoped lang="scss">
.sc ::v-deep ::-webkit-scrollbar {
  display: block;
  width: 10rpx !important;
  height: 10rpx !important;
  background: transparent;
  overflow: auto !important;
}

.sc ::v-deep ::-webkit-scrollbar-thumb {
  background-color: #ffba3d !important;
  border-radius: 10rpx !important;
}

.sc ::v-deep ::-webkit-scrollbar-track{
  border-radius: 10rpx !important;
  background-color: #ffffff !important;
}

.navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;

  .back_content {
    display: flex;
    align-items: center;
    height: 44px;
  }
}

.u-nav-slot {
  display: flex;
  border-radius: 60rpx;
  border: #FFFFFF solid 1px;
  padding: 6rpx 16rpx;
}

.title1 {
  height: 72rpx;
  margin-top: 30rpx;
  font-weight: bold;
  font-size: 76rpx;
  line-height: 72rpx;
  text-align: left;
  margin-left: 56rpx;
  text-transform: none;
  font-style: italic;
  background-image: linear-gradient(to bottom, #fdfaea, #fdf2bb);
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}

.title1::after {
  content: "";
  position: absolute;
  right: 3rpx;
  left: 3rpx;
  z-index: 1;
  text-shadow: 0 6rpx 8rpx rgba(255, 198, 95, 0.6);
}

.title2 {
  text-align: right;
  padding-right: 56rpx;
  margin-top: 30rpx;
  font-weight: bold;
  font-size: 76rpx;
  line-height: 72rpx;
  font-style: italic;
  text-transform: none;
  background-image: linear-gradient(to bottom, #fdfaea, #fdf2bb);
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}

.title2::before {
  content: "薅几次您说了算";
  position: absolute;
  right: 56rpx;
  left: 3rpx;
  z-index: -1;
  text-shadow: 0 6rpx 6rpx rgba(255, 198, 95, 0.6);
}

.notice {
  margin: 0 128rpx 20rpx;
  border-radius: 30rpx 30rpx 8rpx 8rpx;
  overflow: hidden;
  //background-color: rgb(253, 227, 164);
  //border-top: #f9bda3 10rpx solid;
  //border-right: #f9bda3 10rpx solid;
  //border-left: #f9bda3 10rpx solid;
  //border-bottom: #f9bda3 0 solid;
  display: flex;
  align-items: center;
  position: relative;
}

.title3 {
  text-align: center;
  height: 48rpx;
  font-size: 33rpx;
  color: #FFFFFF;
  line-height: 56rpx;
  margin-top: 42rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  margin-bottom: 30rpx;
}

/* 定义放大缩小动画 */
@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.58); /* 放大1.5倍 */
  }
}

/* 应用动画到元素 */
.hands {
  animation: zoomInOut 1s infinite; /* 动画名称，每次动画持续2秒，并且无限循环 */
}

.szbg1{
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient( 180deg, #FFF2F2 0%, #FEB5B5 100%);
  //box-shadow: 0 0 16rpx 0 #FF2E2E99;
  border-radius: 16rpx;
  border: 6rpx solid rgba(255, 179, 179, 0.38);
}
.szbg2{
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient( 180deg, #FEF6E2 0%, #FED783 100%);
  //box-shadow: 0 0 16rpx 0 #FF2E2E99;
  border-radius: 16rpx;
  border: 6rpx solid rgba(255, 214, 128, 0.38);
}
// 盲盒抽奖页面适配小程序，邀请好友助力页面生成海报页面适配小程序，处理页面分享逻辑，添加用户登录和用户信息设置，处理分享页面可会导首页
// 编写抽奖逻辑，添加基础判断，动画切换，帮助后端修改用户信息切换逻辑
</style>